<template>
  <div>
    <mt-header fixed :title="selected" style="height:50px;">
      <router-link to="/" slot="left">
        <mt-button icon="back" style=""></mt-button>
      </router-link>
    </mt-header>

    <mt-tab-container v-model="selected" style="margin-top:50px;text-align:left">
      <mt-tab-container-item :id="item.text" v-for="(item, index) in navData" :key="index" v-if="index == 0">
        <div class="banner-box">
          <mt-swipe :auto="4000" >
            <mt-swipe-item v-for="(item, index) in bannerData" :key="index">
              <img :src="item.img">
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item :id="item.text" v-for="(item, index) in navData" :key="index" v-if="index == 1">
        <mt-cell title="渠道名称" value="clee-123123123"></mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item :id="item.text" v-for="(item, index) in navData" :key="index" v-if="index == 2">
        3
      </mt-tab-container-item>
      <mt-tab-container-item :id="item.text" v-for="(item, index) in navData" :key="index" v-if="index == 3">
        4
      </mt-tab-container-item>
    </mt-tab-container>


    <mt-tabbar v-model="selected" style="color:#999">
      <mt-tab-item :id="item.text" v-for="(item, index) in navData" :key="index" >
        <i class="iconfont" :class="item.aicon" v-if="selected == item.text"></i>
        <i class="iconfont" :class="item.icon" v-else></i>
        <p style="margin-top:5px">{{item.text}}</p>
      </mt-tab-item>
    </mt-tabbar>



  </div>
</template>

<script>
  import banner1 from '../assets/img/banner1.jpg'
  import banner2 from '../assets/img/banner2.jpg'
  export default {
    data() {
      return {
        selected: '首页',
        navData: [
          { text: '首页', icon: 'icon-shouye', aicon: 'icon-shouyefill' },
          { text: '订单', icon: 'icon-dianpu', aicon: 'icon-dianpufill' },
          { text: '发现', icon: 'icon-gouwuche', aicon: 'icon-gouwuchefill' },
          { text: '我的', icon: 'icon-yonghu', aicon: 'icon-yonghufill' }
        ],
        bannerData: [
          {img: banner1},
          {img: banner2}
        ],
        sumdata:[7,5,2,1,6,3,4]
      }
    },
    methods: {
      btn () {
        console.log('tt')
      }
    },
    mounted: function () {
      console.log(this.sumdata.sort())
    },
    watch: {
      selected: function (val, oldVal) {
        // console.log(val)
      }
    }
  }
</script>

<style scoped>
  .banner-box{
    width: 10.0rem;
    height: 5.106667rem;
  }
  .banner-box img{
    display: block;
    width: 100%;
  }
</style>